<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import SetsCore from "./components/SetsCore.vue";
import { useNewRiskControlModel } from "./hooks/NewRiskControlModel";
const {
  form,
  Refform,
  loading,
  columns,
  dataList,
  pagination,
  Risklevel,
  underrules,
  btnloading,
  marktabdata,
  RulesWriting,
  SeleteTypeList,
  SeleteTypeList2,
  DialogVisible,
  changeSeletesList,
  SetKmark1,
  ChangeRules,
  RemoveMark,
  StubimMark,
  hanTypeList,
  changeSeletes,
  handleSizeChange,
  objectSpanMethod,
  handDialogVisible,
  handleCurrentChange
} = useNewRiskControlModel()
const pattern = /^[0-9]\d*$/;
const myvalidator = (rule: any, value: any, callback: () => void) => {

  if (value === '') {
    return callback(new Error('请设置分数'))
  } else if (!pattern.test(value)) {
    return callback(new Error('请设置整数'))
  } else if (Number(value) > 10) {
    return callback(new Error('最大分数值为10'))
  } else {
    return callback()
  }
}
const num100 = (rule: any, value: any, callback: () => void) => {
  if (value === '') {
    return callback(new Error('请设置权重'))
  } else if (!pattern.test(value)) {
    return callback(new Error('请设置整数'))
  } else if (Number(value) > 100) {
    return callback(new Error('最大值为100'))
  } else {
    return callback()
  }
}

const kmarkCallback = (rule: any, value: any, callback: () => void, value2) => {
  if (!pattern.test(value)) {
    return callback(new Error(`必须是整数`))
  } else if (Number(value2) >= Number(value)) {
    return callback(new Error(`必须大于${value2}`))
  } else {
    callback()
  }
}

// const numvalidator = (rule: any, value: any, callback: () => void) => {
//   if (value === '') {
//     return callback(new Error('请设置分值'))
//   } else if (Number(value) > 10) {
//     return callback(new Error('最大分数值为10'))
//   } else {
//     return callback()
//   }
// }
</script>

<template>
  <div class="main">
    <PureTableBar title="模型列表" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="handDialogVisible()"> 新建风控模型 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination" max-height="650"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
        </pure-table>
      </template>
    </PureTableBar>

    <ReDialog :width="760" :height="550" :models="DialogVisible" @Closes="RemoveMark(Refform)">
      <template #header>
        <h2 style="text-align: center;">新建风控模型</h2>
      </template>
      <template #main>
        <el-scrollbar height="470px">
          <el-form :model="form" ref="Refform">
            <div class="form_one">
              <ul>
                <el-form-item label="模型名称" label-width="100px" prop="name" :rules="[
                  {
                    required: true,
                    message: '请输入模型名称',
                    trigger: ['blur', 'change']
                  }
                ]">
                  <el-input v-model.trim="form.name" autocomplete="off" class="!w-[225px]" />
                </el-form-item>
                <el-form-item label="创建时间" label-width="100px" prop="createTime" :rules="[
                  {
                    required: true,
                    message: '请创建时间',
                    trigger: ['blur', 'change']
                  }
                ]">
                  <el-date-picker v-model="form.createTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                    class="!w-[225px]" />
                </el-form-item>
              </ul>
              <ul>
                <el-form-item label="数据类型" label-width="100px" prop="dataType" :rules="[
                  {
                    required: true,
                    message: '请选择数据类型',
                    trigger: 'change'
                  }
                ]">
                  <el-select v-model="form.dataType" multiple collapse-tags @change="hanTypeList" class="!w-[225px]">
                    <el-option v-for="(item, l) in SeleteTypeList" :key="l" :label="item.dictName"
                      :value="item.dictId"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="选择参数" label-width="100px" prop="selectParms" :rules="[
                  {
                    required: true,
                    message: '请选择参数',
                    trigger: ['blur', 'change']
                  }
                ]">
                  <el-select v-model="form.selectParms" multiple collapse-tags :multiple-limit="15"
                    @change="changeSeletes" class="!w-[225px]">
                    <el-option v-for="(item, l) in SeleteTypeList2" :key="l" :label="item.dictName"
                      :value="item.dictId"></el-option>
                  </el-select>
                </el-form-item>
              </ul>
            </div>
            <el-table :data="changeSeletesList" border :span-method="objectSpanMethod"
              style="width: 100%; margin-top: 20px">
              <el-table-column prop="label" label="数据类型" width="100" />
              <el-table-column prop="dictName" label="参数" width="100" />
              <el-table-column prop="details" label="详情">
                <template #default="scope">
                  <dl class="table_type">
                    <dd v-for="(u, o) in scope.row.paramValues">
                      <el-form-item :label="u.paramValue" label-width="100px" :prop="['smark' + u.id]" :rules="[{
                        required: true,
                        validator: myvalidator,
                        trigger: ['blur', 'change']
                      }]">
                        <el-input size="small" type="number" v-model.number="form['smark' + u.id]" />
                      </el-form-item>
                    </dd>
                  </dl>
                </template>
              </el-table-column>
              <el-table-column prop="weight" label="权重" width="100">
                <template #default="scope">
                  <el-form-item :prop="['weight' + scope.row.pid]" :rules="[{
                    required: true,
                    validator: num100,
                    trigger: ['blur', 'change']
                  }]">
                    <el-input size="small" type="number" v-model.number="form['weight' + scope.row.pid]">
                      <template #append>
                        %
                      </template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
            <div class="marktabdata">
              <p></p>
              <table border>
                <thead class="mark_head">
                  <tr>
                    <th>最终得分</th>
                    <th>风险等级</th>
                    <th>核保结果</th>
                  </tr>
                </thead>
                <tbody class="mark_body">
                  <tr v-for="(u, o) in  4" :key="o">
                    <td>
                      <div style="display: flex;">
                        <!-- -------------------- -->
                        <el-form-item :prop="['kmark' + u + '1']" :rules="[{
                          required: true,
                          validator: myvalidator,
                          trigger: ['blur', 'change']
                        }]" v-if="u == 1">
                          <el-input size="small" type="number" v-model.number="form['kmark' + u + '1']" />
                        </el-form-item>

                        <el-form-item v-else>
                          <el-input size="small" type="number" v-model.number="form['kmark' + u + '1']"
                            :disabled="true" />
                        </el-form-item>
                        <!-- -------------------- -->
                        -
                        <el-form-item :prop="['kmark' + u + '2']" :rules="[
                          {
                            required: true,
                            validator: (rule: any, value: any, callback: () => void) => kmarkCallback(rule, value, callback, form['kmark' + u + '1']),
                            trigger: ['blur', 'change']
                          },]">
                          <el-input size="small" type="number" v-model.number="form['kmark' + u + '2']"
                            @blur="SetKmark1((u == 4 ? 'none' : u), form['kmark' + u + '2'])" />
                        </el-form-item>
                      </div>
                    </td>
                    <td>
                      <el-form-item :prop="['isklevel' + u]" :rules="[{
                        required: true,
                        message: '请选择风险等级',
                        trigger: ['blur', 'change']
                      }]">
                        <el-select type="number" v-model.number="form['isklevel' + u]" value-key="dictId">
                          <el-option v-for="(  item, l  ) in   Risklevel  " :key="l" :label="item.dictName"
                            :value="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </td>
                    <td>
                      <el-form-item class="toflex" :prop="['rules' + u]" :rules="[{
                        required: true,
                        message: '请选择核保结果',
                        trigger: ['blur', 'change']
                      }]">
                        <el-select v-model="form['rules' + u]" value-key="dictId" :disabled="form['rules' + u].state">
                          <el-option v-for="(  item, l) in   underrules  " :key="l" :label="item.dictName" :value="item"
                            @click="ChangeRules(item)" :disabled="item.state" />
                        </el-select>
                        <el-select v-model="form.writing" v-if="form['rules' + u].underwriting" multiple collapse-tags>
                          <el-option v-for="(  item, l  ) in   RulesWriting  " :key="l" :label="item.dictName"
                            :value="item.dictId" />
                        </el-select>
                      </el-form-item>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-form>
        </el-scrollbar>
      </template>
      <template #footer>
        <el-button type="primary" @click="StubimMark(Refform)" :loading="btnloading"> 确定 </el-button>
        <el-button @click="RemoveMark(Refform)"> 取消 </el-button>
      </template>
    </ReDialog>
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

:deep(.el-dialog__footer) {
  text-align: center;
}

.form_one {
  ul {
    display: inline-flex;
  }

  .el-form-item__content {
    width: 200px;
  }
}

.table_type {
  display: flex;
  margin: 2px;
  flex-wrap: wrap;

  dd {
    display: flex;
    align-items: center;
    margin: 2px 4px;

    .el-input {
      width: 90px;
    }
  }

  // .el-form-item {
  //   margin-bottom: 10px;
  // }
}

:deep(.el-form-item__label) {
  font-weight: 400;

}

.table_type {
  :deep(.el-form-item) {
    .el-form-item__label {
      line-height: 20px;
    }

    .el-form-item__content {
      line-height: 22px;
      height: 24px;
    }
  }
}

.marktabdata {
  display: flex;
  justify-content: center;
  margin-top: 10px;

  table {
    width: 100%;
  }

  .el-input {
    width: 80px;
  }
}

.mark_head {
  th {
    padding: 5px;
    border: 1px solid #ebeef5;

    &:nth-child(1) {
      width: 20%;
    }

    &:nth-child(2) {
      width: 20%;
    }

    &:nth-child(3) {
      width: 65%;
    }
  }
}

.mark_body {
  td {
    padding: 5px;
    border: 1px solid #ebeef5;

    &:nth-child(1) {
      width: 20%;
    }

    &:nth-child(2) {
      width: 20%;
    }

    &:nth-child(3) {
      width: 65%;
    }
  }

  .el-form-item {
    margin-bottom: 10px;


  }

}

:deep(.toflex) {
  .el-form-item__content {
    flex-wrap: revert;
  }
}

:deep(.el-input-group__append) {
  background-color: transparent;
  padding: 2px;
}

:deep(.el-tag.is-closable) {
  // width: 100px;
  max-width: 130px;
}

:deep(.IsWithinDialog_model) {
  position: absolute !important;

  .el-overlay-dialog {
    position: absolute;
  }
}
</style>
